<template>
    <van-tabs
      :title-active-color="titleActiveColor"
      :title-inactive-color="titleInactiveColor"
      :swipe-threshold="swipeThreshold"
      :swipeable="swipeable"
      :animated="animated"
      :background="background"
      :color="tabColor"
      v-model="fatherActive"
      @click="onClick"
    >
      <van-tab
        v-for="(item, index) in TabLists"
        :title="item.title"
        :key="index"
        :sticky="IsSticky"
      >
        <slot name="items" :item="item"></slot>
      </van-tab>
    </van-tabs>
</template>

<script>
import { Tab, Tabs } from 'vant';
// tab切换组件-支持自定义tab页面内容
export default {
  name: "commonTab",
  components:{
    'van-tabs':Tabs,
    'van-tab':Tab
  },
  props: {
    // tab栏标签数据
    TabLists: {
      type: Array,
    },
    // 当前激活标签对应的索引值
    active: {
      type: Number,
      default: 0,
    },
    // 是否开启粘性布局
    IsSticky: {
      type: Boolean,
      default: false,
    },
    // 标题选中态颜色
    titleActiveColor: {
      type: String,
      default: "#222222",
    },
    // 标题未选中态颜色
    titleInactiveColor: {
      type: String,
      default: "#999999",
    },
    // Tab标签主题色
    tabColor: {
      type: String,
      default: "#ee0a24",
    },
    // Tab标签背景色
    background: {
      type: String,
      default: "white",
    },
    // 是否开启切换标签内容时的转场动画
    animated: {
      type: Boolean,
      default: true,
    },
    // 是否开启手势滑动切换
    swipeable: {
      type: Boolean,
      default: true,
    },
    // 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
    swipeThreshold: {
      type: Number,
      default: 5,
    },
  },
  computed: {
    fatherActive: {
      get() {
        return this.active;
      },
      set(val) {
        this.$emit("update:active", val);
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    onClick(name, title) {
      this.$emit("clickCurrentTab", title);
    },
  },
};
</script>

<style lang="less" scoped>

</style>
